/* 入口函数：等页面dom树加载完毕后执行 */
$(function () {
  //匿名函数自调用

  //1.饼图
  ; (function () {
    //3.1 基于准备好的dom，初始化echarts实例
    //让你的图标数据 和 页面盒子进行绑定
    let myChart = echarts.init(document.querySelector('.pie'))

    //3.2 指定图表的配置项和数据
    // 设置图表的样式和 数据
    let option = {
      //顶部小标题提示
      // legend: {
      //   top: 'top'
      // },
      //右上角工具箱
      // toolbox: {
      //   show: true,
      //   feature: {
      //     mark: { show: true },
      //     dataView: { show: true, readOnly: false },
      //     restore: { show: true },
      //     saveAsImage: { show: true }
      //   }
      // },
      //图表颜色
      color: [
        '#132',
        '#f6f',
        '#6a7788',
        '#d116c3',
        '#768f18',
        '#b52b88',
        '#ae1ed0',
        '#63453f'
      ],
      //图表内容(必须)
      series: [
        {
          name: '点位分布',
          type: 'pie',
          //控制内圆 和 外圆的半径大小
          radius: ['10%', '70%'],
          //控制圆心位置
          center: ['50%', '50%'],
          //扇形高度会随着数据变化而变化
          roseType: 'area',
          //控制扇形圆角大小
          itemStyle: {
            // borderRadius: 8
          },
          //表格数据
          data: [
            {
              value: 40,
              name: '湖北',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#83bfa6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ])
              }
            },
            { value: 28, name: '云南', },
            { value: 22, name: '北京' },
            { value: 20, name: '山东' },
            { value: 28, name: '河北' },
            { value: 16, name: '江苏' },
            { value: 22, name: '浙江' },
            { value: 28, name: '四川' },
          ]
        }
      ]
    }

    //3.3 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  })()

    //2.柱状图
    ; (function () {
      //3.1 基于准备好的dom，初始化echarts实例
      //让你的图标数据 和 页面盒子进行绑定
      let myChart = echarts.init(document.querySelector('.bar'))

      //3.2 指定图表的配置项和数据
      // 设置图表的样式和 数据
      //自定义单根柱子样子
      let item = {
        value: 110,
        barWidth: 30,
        //柱子样式
        itemStyle: {
          //渐变颜色
          color: '#254065'
        }
      }

      let option = {
        xAxis: {
          type: 'category',
          data: [
            '上海',
            '',
            '北京',
            '',
            '合肥',
            '',
            '...',
            '',
            '杭州',
            '',
            '济南',
            '',
            '重庆'
          ],
          //坐标刻度文本
          axisLabel: {
            show: true,
            color: '#00edf7'
          }
        },
        yAxis: [
          //左侧轴线
          {
            type: 'value',
            //坐标轴线
            axisLine: {
              show: true,
              lineStyle: {
                color: '#f00'
              }
            },
            //刻度线
            axisTick: {
              show: true,
              lineStyle: {
                color: '#0f0'
              }
            },
            //坐标刻度文本
            axisLabel: {
              show: true,
              color: '#00f'
            },
            //刻度分割线
            splitLine: {
              // Y轴分割线 显示/隐藏
              show: true,
              lineStyle: {
                color: ['#0f0', '#8860f0']
              }
            }
          },
          //右侧轴线
          {
            type: 'value',
            //坐标轴线
            axisLine: {
              show: true,
              lineStyle: {
                color: '#f00'
              }
            }
          }
        ],
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            //柱子宽度
            //   barWidth: 20,
            //柱子样式
            itemStyle: {
              //渐变颜色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00f8f9' },
                { offset: 1, color: '#0066cf' }
              ])
            },
            data: [220, 200, 150, 80, 70, item, item, item, 90, 85, 60, 55, 102],
            type: 'bar'
          }
        ]
      }

      //3.3 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    })()

    //3.折线图
    ; (function () {
      //3.1 基于准备好的dom，初始化echarts实例
      //让你的图标数据 和 页面盒子进行绑定
      window.lineEcharts = echarts.init(document.querySelector('.line'))

      //3.2 指定图表的配置项和数据
      // 设置图表的样式和 数据
      window.lineOption = {
        //标题
        title: {
          subtext: '单位:万',
          left: 20,
          subtextStyle: {
            color: '#3e84db'
          }
        },
        //鼠标滑入提示
        tooltip: {
          trigger: 'axis'
        },
        //类似于padding内边距
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        //顶部小标题(注意点：必须要和数据的name值一致)
        legend: {
          data: ['预期销售额', '实际销售额']
        },
        xAxis: {
          type: 'category',
          data: [
            '一月',
            '',
            '三月',
            '',
            '五月',
            '',
            '七月',
            '',
            '九月',
            '',
            '十一月',
            ''
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            type: 'line',
            //是否平滑曲线(圆角)
            smooth: true,
            //圈圈样式
            symbol: 'emptyCircle',
            //圈圈标记大小
            symbolSize: 8,
            name: '预期销售额',
            //拐点颜色(小圈圈)
            itemStyle: {
              color: '#cf3a36'
            },
            //线条颜色
            lineStyle: {
              color: '#cf3a36'
            }
          },
          {
            name: '实际销售额',
            type: 'line',
            stack: 'Total',
            smooth: true,
            symbolSize: 8,
            //拐点颜色(小圈圈)
            itemStyle: {
              color: '#00dcdf'
            },
            //线条颜色
            lineStyle: {
              color: '#00dcdf'
            },
            data: [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
          }
        ]
      }

      //3.3 使用刚指定的配置项和数据显示图表。
      lineEcharts.setOption(lineOption)
    })()

    //4.环形图
    ; (function () {
      //3.1 基于准备好的dom，初始化echarts实例
      //让你的图标数据 和 页面盒子进行绑定
      let myChart = echarts.init(document.querySelector('.circle'))

      //3.2 指定图表的配置项和数据
      // 设置图表的样式和 数据
      let option = {
        series: [
          {
            type: 'pie',
            radius: ['100%', '120%'],
            center: ['50%', '70%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: '#12274d'
                }
              },
              {
                value: 1,
                itemStyle: {
                  color: 'transparent'
                }
              },
              {
                value: 1,
                itemStyle: {
                  color: 'transparent'
                }
              },
              {
                value: 1,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#00f8f9' },
                    { offset: 1, color: '#0066cf' }
                  ])
                }
              }
            ]
          }
        ]
      }

      //3.3 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    })()

    //5.迁徙图
    ; (function () {
      /* 3.js初始化 ： 给图表添加数据  */

      //3.1 基于准备好的dom，初始化echarts实例
      //让你的图标数据 和 页面盒子进行绑定
      let myChart = echarts.init(document.querySelector('.china'))

      //3.2 指定图表的配置项和数据
      var geoCoordMap = {
        北京: [116.397128, 39.916527],
        武汉: [114.02919, 30.58203],
        灵宝: [110.8945, 34.51682],
        韶关: [113.591544, 24.801322],
        洛阳: [112.434468, 34.663041],
        长治: [113.113556, 36.191112],
        宿州: [116.984084, 33.633891],
        信阳: [114.075031, 32.123274],
        芜湖: [118.376451, 31.326319],
        景德镇: [117.214664, 29.29256],
        吉安: [114.986373, 27.111699],
        九江: [115.992811, 29.712034],
        宁都: [116.01565, 26.47227],
        长汀: [116.35888, 25.82773],
        南昌: [115.892151, 28.676493],
        赣州: [114.940278, 25.85097],
        梅州: [116.117582, 24.299112],
        龙川: [115.26025, 24.10142],
        大埔: [116.69662, 24.35325],
        汕头: [116.708463, 23.37102],
        南雄: [114.30966, 25.11706],
        广州: [113.280637, 23.125178],
        宝安: [113.88311, 22.55371],
        阳江: [111.975107, 21.859222],
        桂平: [110.08105, 23.39339],
        信宜: [110.94647, 22.35351],
        钦州: [108.624175, 21.967127],
        海口: [110.33119, 20.031971],
        柳州: [109.411703, 24.314617],
        榕江: [108.52072, 25.92421],
        凤山: [107.04892, 24.54215],
        韶光: [113.591544, 24.801322],
        贺州: [111.552056, 24.414141],
        郴州: [113.032067, 25.793589],
        邵阳: [111.46923, 27.237842],
        常德: [111.691347, 29.040225],
        恩施: [109.47942, 30.29502],
        重庆: [106.504962, 29.533155],
        惠州: [114.412599, 23.079404],
        龙岩: [117.02978, 25.091603],
        高雄: [120.311922, 22.620856],
        台北: [121.56517, 25.037798],
        中山: [113.382391, 22.521113],
        广元: [105.829757, 32.433668],
        成都: [104.065735, 30.659462],
        会理: [102.24539, 26.65627],
        凭祥: [106.75534, 22.10573]
      }

      var BJData = [
        [
          {
            name: '北京'
          },
          {
            name: '北京',
            value: 200
          }
        ],
        [
          {
            name: '北京'
          },
          {
            name: '武汉',
            value: 160
          }
        ],
        [
          {
            name: '宿州'
          },
          {
            name: '芜湖',
            value: 60
          }
        ],

        [
          {
            name: '灵宝'
          },
          {
            name: '灵宝',
            value: 60
          }
        ],
        [
          {
            name: '长治'
          },
          {
            name: '长治',
            value: 60
          }
        ],
        [
          {
            name: '洛阳'
          },
          {
            name: '洛阳',
            value: 60
          }
        ],
        [
          {
            name: '灵宝'
          },
          {
            name: '信阳',
            value: 60
          }
        ],
        [
          {
            name: '长治'
          },
          {
            name: '宿州',
            value: 60
          }
        ],
        [
          {
            name: '洛阳'
          },
          {
            name: '信阳',
            value: 60
          }
        ],
        [
          {
            name: '信阳'
          },
          {
            name: '吉安',
            value: 60
          }
        ]
      ]

      var SHData = [
        [
          {
            name: '南昌'
          },
          {
            name: '南昌',
            value: 60
          }
        ],

        [
          {
            name: '信阳'
          },
          {
            name: '景德镇',
            value: 60
          }
        ],

        [
          {
            name: '芜湖'
          },
          {
            name: '景德镇',
            value: 60
          }
        ],

        [
          {
            name: '景德镇'
          },
          {
            name: '长汀',
            value: 60
          }
        ],

        [
          {
            name: '南昌'
          },
          {
            name: '赣州',
            value: 60
          }
        ]
      ]

      var GZData = [
        [
          {
            name: '吉安'
          },
          {
            name: '南雄',
            value: 60
          }
        ],
        [
          {
            name: '宁都'
          },
          {
            name: '宁都',
            value: 60
          }
        ],
        [
          {
            name: '南雄'
          },
          {
            name: '惠州',
            value: 60
          }
        ],
        [
          {
            name: '赣州'
          },
          {
            name: '龙川',
            value: 60
          }
        ],
        [
          {
            name: '宁都'
          },
          {
            name: '梅州',
            value: 60
          }
        ],
        [
          {
            name: '长汀'
          },
          {
            name: '龙岩',
            value: 60
          }
        ]
      ]

      var WJData = [
        [
          {
            name: '梅州'
          },
          {
            name: '汕头',
            value: 60
          }
        ],
        [
          {
            name: '汕头'
          },
          {
            name: '高雄',
            value: 60
          }
        ],
        [
          {
            name: '高雄'
          },
          {
            name: '台北',
            value: 60
          }
        ],
        [
          {
            name: '龙川'
          },
          {
            name: '宝安',
            value: 60
          }
        ],
        [
          {
            name: '惠州'
          },
          {
            name: '广州',
            value: 60
          }
        ],

        [
          {
            name: '广州'
          },
          {
            name: '桂平',
            value: 60
          }
        ],
        [
          {
            name: '桂平'
          },
          {
            name: '柳州',
            value: 60
          }
        ],

        [
          {
            name: '韶关'
          },
          {
            name: '韶关',
            value: 60
          }
        ],

        [
          {
            name: '柳州'
          },
          {
            name: '榕江',
            value: 60
          }
        ],

        [
          {
            name: '柳州'
          },
          {
            name: '凤山',
            value: 60
          }
        ],

        [
          {
            name: '惠州'
          },
          {
            name: '中山',
            value: 60
          }
        ],

        [
          {
            name: '中山'
          },
          {
            name: '阳江',
            value: 60
          }
        ],

        [
          {
            name: '韶关'
          },
          {
            name: '贺州',
            value: 60
          }
        ],

        [
          {
            name: '韶关'
          },
          {
            name: '郴州',
            value: 60
          }
        ],

        [
          {
            name: '郴州'
          },
          {
            name: '邵阳',
            value: 60
          }
        ],

        [
          {
            name: '邵阳'
          },
          {
            name: '常德',
            value: 60
          }
        ],
        [
          {
            name: '常德'
          },
          {
            name: '恩施',
            value: 60
          }
        ],
        [
          {
            name: '恩施'
          },
          {
            name: '重庆',
            value: 60
          }
        ],
        [
          {
            name: '重庆'
          },
          {
            name: '成都',
            value: 60
          }
        ],

        [
          {
            name: '重庆'
          },
          {
            name: '广元',
            value: 60
          }
        ],

        [
          {
            name: '重庆'
          },
          {
            name: '会理',
            value: 60
          }
        ]
      ]

      var JGData = [
        [
          {
            name: '中山'
          },
          {
            name: '信宜',
            value: 60
          }
        ],

        [
          {
            name: '信宜'
          },
          {
            name: '钦州',
            value: 60
          }
        ],
        [
          {
            name: '桂平'
          },
          {
            name: '凭祥',
            value: 60
          }
        ],
        [
          {
            name: '信宜'
          },
          {
            name: '海口',
            value: 60
          }
        ]
      ]

      var planePath =
        'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'

      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name]
          var toCoord = geoCoordMap[dataItem[1].name]
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord
              },
              {
                coord: toCoord
              }
            ])
          }
        }
        return res
      }

      var color = ['#3ed4ff', ' #ffa022', '#a6c84c', '#e15454']
      var series = []
        ;[
          ['长治', BJData],
          ['景德镇', SHData],
          ['宁都', GZData],
          ['汕头', WJData],
          ['信宜', JGData]
        ].forEach(function (item, i) {
          series.push(
            {
              type: 'lines',
              zlevel: 1,
              effect: {
                //迁徙动画
                show: true,
                //迁徙速度  越大越慢
                period: 4,
                //尾迹大小
                trailLength: 0.5,
                color: '#f00',
                //尾迹头部圈圈大小
                symbolSize: 6
              },
              //线条样式
              lineStyle: {
                normal: {
                  color: color[i],
                  width: 0,
                  curveness: 0.2
                }
              },

              data: convertData(item[1])
            },
            {
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 1,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
              },
              lineStyle: {
                normal: {
                  color: color[i],
                  width: 1,
                  opacity: 0.4,
                  curveness: 0.2
                }
              },

              data: convertData(item[1])
            },
            {
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
              },
              lineStyle: {
                normal: {
                  color: color[i],
                  width: 1,
                  opacity: 0.4,
                  curveness: 0.2
                }
              },

              data: convertData(item[1])
            },
            {
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
              },
              lineStyle: {
                normal: {
                  color: color[i],
                  width: 1,
                  opacity: 0.4,
                  curveness: 0.2
                }
              },

              data: convertData(item[1])
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                brushType: 'stroke'
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  formatter: '{b}'
                }
              },
              symbolSize: function (val) {
                return val[2] / 8
              },
              itemStyle: {
                normal: {
                  color: color[i]
                }
              },
              data: item[1].map(function (dataItem) {
                return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                }
              })
            }
          )
        })

      var option = {
        backgroundColor: '#080a20',
        title: {
          text: '',
          subtext: '',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: 'bottom',
          left: 'right',
          data: [],
          textStyle: {
            color: '#fff'
          },
          selectedMode: 'single'
        },
        geo: {
          map: 'china',
          zoom: 1,
          scaleLimit: {
            //控制滚轮缩放大小
            max: 8,
            min: 1
          },
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#142957',
              borderColor: '#3ed4ff'
            },
            emphasis: {
              areaColor: '#fc254d'
            }
          }
        },
        series: series
      }

      //3.3 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    })()
})
